<h3>Recipient Info</h3>
<table width="100%">
    <TR><TD width="30%">Greeting</TD><TD><TMPL_VAR name=greeting></TD></TR>
    <TR><TD>Recipient Key</TD><TD><TMPL_VAR name=recipient_key></TD></TR>
</table>
<div class="campaigns">
<h3>Campaign Performance</h3>

<!--<h3>Summary</h3>
<table width="100%">
    <TR><TD width="30%"># of views ever</TD><TD><TMPL_VAR name=VIEW_COUNT></TD></TR>
    <TR><TD># of clicks ever</TD><TD><TMPL_VAR name=CLICK_COUNT></TD></TR>
</table>-->

<h4>Views</h4>
<table width="100%">
    <TR>
        <TH>#</TH>
        <TH width="50%">content</TH>
        <TH width="30%">group</TH>
        <TH># of views</TH>
    </TR>
    <TMPL_LOOP name=RECIPIENT_VIEWS>
        <TR>
            <TD><TMPL_VAR name=campaign_id></TD>
            <TD><TMPL_VAR name=campaign_content></TD>
            <TD><TMPL_VAR name=campaign_group></TD>
            <TD>-</TD>
        </TR>
    </TMPL_LOOP>
</table>

<h4>Clicks</h4>
<table width="100%">
    <TR>
        <TH>#</TH>
        <TH width="50%">content</TH>
        <TH width="30%">group</TH>
        <TH># of clicks</TH>
    </TR>
    <TMPL_LOOP name=RECIPIENT_CLICKS>
    <TR>
        <TD><TMPL_VAR name=campaign_id></TD>
        <TD><TMPL_VAR name=campaign_content></TD>
        <TD><TMPL_VAR name=campaign_group></TD>
        <TD>-</TD>
    </TR>
    </TMPL_LOOP>
</table>
</div>

<style>
h3 {
/*     background-color: orange; */
    color: orange;
}
th {
    color: grey;
    font-size: 11pt;
}

.campaigns {
    background-color: lightyellow;
}
</style>